<template>
<div class="add-invoice">
    <div class="header">
        <p class="blod">发票类型</p>
        <div class="tabs flex-center-sa">
            <van-button @click="changeType(2)" :type="form.type === 2 ? 'danger' : 'default'" size="mini" plain >增值税发票</van-button>
            <van-button @click="changeType(1)" :type="form.type === 1 ? 'danger' : 'default'" size="mini" plain >普通发票</van-button>
        </div>
    </div>
    <div class="form-box">
        <!-- <div v-if="type === 0">11111</div> -->
        <van-form size="mini" :show-error-message="false" label-width="3rem" ref="vanForm">
            <!-- <template v-if="form.type === 1"> -->
                <van-field name="radio" :label="' '" :rules="[{ required: true, message: '请选择发票类型' }]">
                    <template #input>
                        <van-radio-group v-model="form.rise" direction="horizontal">
                        <van-radio :name="1" checked-color="#ee0a24">企业</van-radio>
                        <van-radio :name="2" checked-color="#ee0a24">个人</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
            <!-- </template> -->
            <van-field
                v-model="form.ltd_name"
                name="发票抬头"
                label="发票抬头："
                placeholder="请输入发票抬头"
                :rules="[{ required: true, message: '请填写发票抬头' }]"
            />
            <van-field
                v-model="form.ltd_code"
                name="用户名"
                label="税号："
                placeholder="请输入税号或纳税人识别码"
                :rules="[{ required: true, message: '请填写税号或纳税人识别码' }]"
            />

            <!-- <template v-if="form.type === 2"> -->
                <van-field
                    v-model="form.ltd_address"
                    name="用户名"
                    label="注册地址："
                    placeholder="请输入注册地址"
                    :rules="[{ required: true, message: '请填写注册地址' }]"
                />
                <van-field
                    v-model="form.ltd_phone"
                    name="注册电话"
                    label="注册电话："
                    placeholder="请输入注册电话"
                    :rules="[{ required: true, message: '请填写注册电话' }]"
                />
                <van-field
                    v-model="form.ltd_bank"
                    name="开户银行"
                    label="开户银行："
                    placeholder="请输入开户银行"
                    :rules="[{ required: true, message: '请填写开户银行' }]"
                />
                <van-field
                    v-model="form.ltd_bank_code"
                    name="银行账户"
                    label="银行账户："
                    placeholder="请输入银行账户"
                    :rules="[{ required: true, message: '请填写银行账户' }]"
                /> 
                <van-divider dashed style="margin-top: 4px; margin-bottom: 4px;">收票人信息</van-divider>
                <van-field
                    v-model="form.s_name"
                    name="收票人姓名"
                    label="收票人姓名："
                    placeholder="请输入收票人姓名"
                    :rules="[{ required: true, message: '请填写收票人姓名' }]"
                />
                <van-field
                    v-model="form.s_phone"
                    name="收票人电话"
                    label="收票人电话："
                    placeholder="请输入收票人电话"
                    :rules="[{ required: true, message: '请填写收票人电话' }]"
                />
                <van-field
                    readonly
                    @click="show = true"
                    v-model="form.s_region"
                    name="收票人地址"
                    label="收票人地址："
                    placeholder="请输入收票人地址"
                    :rules="[{ required: true, message: '请填写收票人地址' }]"
                />
                <van-field
                    v-model="form.s_address"
                    name="收票人详细地址"
                    label="收票人详细地址："
                    placeholder="请输入收票人详细地址"
                    :rules="[{ required: true, message: '请填写收票人详细地址' }]"
                />
            <!-- </template> -->
        </van-form>
    </div>

    <div class="footer flex-conter">
        <van-button type="danger" round size="small" @click="submit"> 保存发票信息 </van-button>
    </div>

    <!-- <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-area title="地址选择" :area-list="areaList"  @confirm="addressConfirm" @cancel="show = false" />
    </van-popup> -->
    <City :show.sync="show" @addressConfirm="addressConfirm" />
</div>
</template>

<script>
// import { areaList } from '@vant/area-data';
import City from '@/components/city'
export default {
    components: { City },
    data () {
        return {
            show: false,
            // areaList: areaList,
            form: {  // 发票
                type: 2,
                rise: 1,
                ltd_name: '',
                ltd_code: '',
                ltd_address: '',
                ltd_phone: '',
                ltd_bank: '',
                ltd_bank_code: '',
                s_name: '',
                s_phone: '',
                s_region: '',
                s_address: ''
            }
        }
    },
    methods: {
        changeType (type) {
            this.form.type = type
        },
        submit () {
            this.$refs.vanForm.validate()
            .then (() => {
                this.$buyer.invoiceDdit(this.form).then(res => {
                    const toast = this.$toast(this.form.id ? '修改成功' : '新增成功')
                    setTimeout(() => {
                        toast.clear()
                        this.$router.back()
                    }, 1000)
                })
            })
            .catch (err => {
                err[0].message && this.$toast(err[0].message)
            })
        },
        addressConfirm (val, old) {
            console.log(val, old)
            this.form.s_region = val.map(v => v.name).join(' ')
            this.show = false
        }
    },
    created () {
        if (this.$route.query.id) {
            // 编辑发票
            let invoice = this.$store.getters['user/invoice'].find(v => v.id === +this.$route.query.id)
            invoice.s_region = `${invoice.s_province} ${invoice.s_city} ${invoice.s_area}`
            this.form = invoice
        }
    }
}
</script>

<style lang="less" scoped>
.header {
    background: #fff;
    p {
        padding: 10px 0;
    }
    .tabs {
        height: 40px;
    }
}
.add-invoice {
    display: flex;
    flex-direction: column;
}
.form-box {
    flex: 1;
    margin-top: 10px;
    overflow-y: auto;
    padding-bottom: 20px;
}

.footer {
    padding: 10px 20px;
    background: #fff;
}
</style>
